<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div  >
    <div style="display: flex ;align-items:center;justify-content:center "  >
    <input type="text" id="searchBox" placeholder="请输入想要查找的品牌">
    <input type="button" value="查询" id="search">
    </div>
    <div id="father" align="center" style="text-align: left;margin-left: 525px; margin-right: 500px"></div>
</div>

<script src="js/axios-0.18.0.js"></script>
<script>
    let brandNameList = [];
    document.getElementById("searchBox").onkeyup = function () {
        brandNameList = [];
        document.getElementById("father").innerHTML = ''
        let brandName = this.value;
        axios({
            method: 'post',
            url: 'http://localhost:8088/w9/searchNameServlet',
            data: 'brandName=' + brandName
        }).then(function (resp) {
            brandNameList = resp.data;
            if (brandNameList != null) {
                let fatherDiv = document.getElementById("father");
                brandNameList.forEach((brand) => {
                    let childDiv = document.createElement('div');

                    childDiv.innerText = brand;
                    childDiv.id=brand;

                    fatherDiv.appendChild(childDiv);
                })
            }
        })
    }

    document.getElementById("father").onmouseover=function (){
        brandNameList.forEach((brand)=>{
            document.getElementById(brand).onmouseover=function (){
                this.style.background="red";
                document.getElementById(brand).onclick=function (){
               //     document.getElementById(brand).innerText=''
                    document.getElementById("searchBox").value=document.getElementById(brand).innerText
                }
            }
            document.getElementById(brand).onmouseout=function (){
                this.style.background="";
            }
        })
    }

</script>
</body>
</html>
